<template>
<div class="circle-box">
    <div class="circle" style="height: 60px; width: 60px;">
        <svg viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"  fill="none" stroke-width="1" :stroke="color" />
            <circle cx="50" cy="50" r="38"  fill="none" stroke-width="13" stroke="rgba(65, 141, 253, 0.3)" />
            <circle cx="50" cy="50" r="38"  fill="none" stroke-width="11" 
                :stroke="color"
                stroke-dasharray="157.07963267948966"
                :stroke-dashoffset="(3.14*50*(100-process))/100"
            />
        </svg>
        <span :style="{'color': color}">{{process}}%</span>
    </div>
    <span :title="name">{{ name }}</span>
</div>
</template>
<script setup>
const props = defineProps({
    color: String,
    process: Number,
    name: String,
})
const { color, process, name} = toRefs(props)

</script>
<style scoped lang="scss">
.circle-box{
    position: relative;
    text-align: center;
    background: url('@/assets/images/housing/arrow.png');
    background-repeat: no-repeat;
    background-position: 27px 15px;
    span{
        color: #fff;
        font-size: 12px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 60px;
    }
    .circle{
        margin-bottom: 3px;
        span{
            position: absolute;
            top: 23px;
            font-size: 16px;
            display: block;
            width: 60px;
            text-align: center;
        }
    }
}
</style>